<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Tabs name="main_tabs_child">
          <TabPane tab="main_tabs_child" label="基础配置">
            <Form :label-width="105">
              <FormItem label="组件ID">
                <i-input size="small" v-model="id" disabled>
                  <Button title="复制" slot="append" v-clipboard="idClipOptions"><Icon type="md-copy" /></Button>
                </i-input>
              </FormItem>
            </Form>

            <Collapse value="2">
              <Panel name="1">
                表头
                <div slot="content">
                  <Form :label-width="105">
                    <FormItem label="显示">
                      <i-switch v-model="headerStyle.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="对齐方式">
                      <Select :transfer="true" size="small" v-model="headerStyle.textAlign">
                        <Option v-for="item in $PnDict.textAligns" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="字体大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="headerStyle.fontSize"></InputNumber> px
                    </FormItem>
                    <FormItem label="字体颜色">
                      <PnColorPicker size="small" v-model="headerStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="背景色">
                      <PnColorPicker size="small" v-model="headerStyle.backgroundColor" alpha recommend/>
                    </FormItem>
                    <FormItemPanel title="边框">
                      <FormItem label="边框类型">
                        <Select :transfer="true" size="small" v-model="headerStyle.borderStyle">
                          <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="边框宽度">
                        <InputNumber size="small" :max="1000" :min="0" v-model="headerStyle.borderWidth"></InputNumber> px
                      </FormItem>
                      <FormItem label="边框颜色">
                        <PnColorPicker size="small" v-model="headerStyle.borderColor" alpha recommend/>
                      </FormItem>
                    </FormItemPanel>
                    <FormItem label="行高">
                      <InputNumber size="small" :max="1000" :min="0" v-model="headerStyle.lineHeight"></InputNumber> px
                    </FormItem>

                  </Form>
                </div>
              </Panel>
              <Panel name="2">
                主体内容
                <div slot="content">
                  <Form :label-width="105">

                    <FormItem label="对齐方式">
                      <Select :transfer="true" size="small" v-model="bodyStyle.textAlign">
                        <Option v-for="item in $PnDict.textAligns" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>
                    <FormItem label="字体大小">
                      <InputNumber size="small" :max="1000" :min="0" v-model="bodyStyle.fontSize"></InputNumber> px
                    </FormItem>
                    <FormItem label="字体颜色">
                      <PnColorPicker size="small" v-model="bodyStyle.color" alpha recommend/>
                    </FormItem>
                    <FormItem label="背景色">
                      <PnColorPicker size="small" v-model="bodyStyle.backgroundColor" alpha recommend/>
                    </FormItem>
                    <FormItemPanel title="斑马纹路">
                      <FormItem label="开启">
                        <i-switch size="small" v-model="bodyStyle.zebra">
                          <span slot="open"></span>
                          <span slot="close"></span>
                        </i-switch>
                      </FormItem>
                      <FormItem label="纹路颜色">
                        <PnColorPicker size="small" v-model="bodyStyle.zebraColor" alpha recommend/>
                      </FormItem>
                    </FormItemPanel>
                    <FormItemPanel title="边框">
                      <FormItem label="边框类型">
                        <Select :transfer="true" size="small" v-model="bodyStyle.borderStyle">
                          <Option v-for="item in $PnDict.borderStyles" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="边框宽度">
                        <InputNumber size="small" :max="1000" :min="0" v-model="bodyStyle.borderWidth"></InputNumber> px
                      </FormItem>
                      <FormItem label="边框颜色">
                        <PnColorPicker size="small" v-model="bodyStyle.borderColor" alpha recommend/>
                      </FormItem>
                    </FormItemPanel>
                    <FormItem label="行高">
                      <InputNumber size="small" :max="1000" :min="0" v-model="bodyStyle.lineHeight"></InputNumber> px
                    </FormItem>
                    <FormItemPanel title="内边距">
                      <FormItem label="上">
                        <InputNumber size="small" :max="1000" :min="0" v-model="bodyStyle.paddingTop"></InputNumber> px
                      </FormItem>
                      <FormItem label="右">
                        <InputNumber size="small" :max="1000" :min="0" v-model="bodyStyle.paddingRight"></InputNumber> px
                      </FormItem>
                      <FormItem label="下">
                        <InputNumber size="small" :max="1000" :min="0" v-model="bodyStyle.paddingBottom"></InputNumber> px
                      </FormItem>
                      <FormItem label="左">
                        <InputNumber size="small" :max="1000" :min="0" v-model="bodyStyle.paddingLeft"></InputNumber> px
                      </FormItem>
                    </FormItemPanel>

                  </Form>
                </div>
              </Panel>
              <Panel name="3">
                分页器
                <div slot="content">
                  <Form :label-width="105">

                    <FormItem label="显示">
                      <i-switch v-model="pager.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="每页行数">
                      <InputNumber size="small" :max="1000" :min="1" v-model="pager.pageSize"></InputNumber>
                    </FormItem>

                    <FormItemPanel title="分页按钮">
                      <FormItem label="字体大小">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.buttonStyle.fontSize"></InputNumber> px
                      </FormItem>
                      <FormItem label="边框宽度">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.buttonStyle.borderWidth"></InputNumber> px
                      </FormItem>
                      <FormItem label="边框颜色">
                        <PnColorPicker size="small" v-model="pager.buttonStyle.borderColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="圆角">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.buttonStyle.borderRadius"></InputNumber> px
                      </FormItem>
                      <FormItem label="背景色">
                        <PnColorPicker size="small" v-model="pager.buttonStyle.backgroundColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="行高">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.buttonStyle.lineHeight"></InputNumber> px
                      </FormItem>
                      <FormItem label="字体颜色">
                        <PnColorPicker size="small" v-model="pager.buttonStyle.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="内边距-上">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.buttonStyle.paddingTop"></InputNumber> px
                      </FormItem>
                      <FormItem label="内边距-右">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.buttonStyle.paddingRight"></InputNumber> px
                      </FormItem>
                      <FormItem label="内边距-下">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.buttonStyle.paddingBottom"></InputNumber> px
                      </FormItem>
                      <FormItem label="内边距-左">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.buttonStyle.paddingLeft"></InputNumber> px
                      </FormItem>
                    </FormItemPanel>

                    <FormItemPanel title="分页详情">
                      <FormItem label="字体颜色">
                        <PnColorPicker size="small" v-model="pager.pagerDetail.color" alpha recommend/>
                      </FormItem>
                      <FormItem label="字体大小">
                        <InputNumber size="small" :max="1000" :min="0" v-model="pager.pagerDetail.fontSize"></InputNumber> px
                      </FormItem>
                    </FormItemPanel>

                  </Form>
                </div>
              </Panel>
            </Collapse>

          </TabPane>
          <TabPane tab="main_tabs_child" label="表格列">
            <Button class="float-right" size="small" type="primary" @click="addTableCol"><Icon type="md-add" /> 新增列</Button>
            <div class="clearfix"></div>
            <div class="m-b-10px"></div>

            <Collapse>
              <Panel :name="$PnUtil.uuid()" v-for="(row, index) in tableCols" :key="index">
                {{'第'+(index+1)+'列 -- '+row.title}}
                <a href="javascript:;" class="float-right m-r-5px" style="color: #757575;" @click.stop="deleteTableCol(index)"><Icon type="md-trash" /></a>
                <div slot="content">
                  <Form :label-width="100">
                    <FormItem label="显示">
                      <i-switch size="small" v-model="row.show">
                        <span slot="open"></span>
                        <span slot="close"></span>
                      </i-switch>
                    </FormItem>
                    <FormItem label="字段名">
                      <Input size="small" v-model="row.field" placeholder=""/>
                    </FormItem>
                    <FormItem label="显示名">
                      <Input size="small" v-model="row.title" placeholder=""/>
                    </FormItem>
                    <FormItem label="列宽">
                      <InputNumber size="small" :max="1000" :min="0" v-model="row.width"></InputNumber> px
                    </FormItem>
                    <FormItem label="展示类型">
                      <Select :transfer="true" size="small" v-model="row.type">
                        <Option v-for="item in colTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                      </Select>
                    </FormItem>


                    <FormItemPanel v-if="row.type == 'progress'" title="进度图">
                      <Alert :style="{padding: '10px'}">
                        要使用进度图显示，该列字段数值必须小于100，否则进度图将出现异常。
                      </Alert>

                      <FormItem label="条纹渐变动画">
                        <i-switch size="small" v-model="row.progress.striped">
                          <span slot="open"></span>
                          <span slot="close"></span>
                        </i-switch>
                      </FormItem>
                      <FormItem label="类型">
                        <Select :transfer="true" size="small" v-model="row.progress.type">
                          <Option v-for="item in progressTypes" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                      </FormItem>
                      <FormItem label="进度条宽度">
                        <InputNumber size="small" :max="1000" :min="0" v-model="row.progress.strokeWidth"></InputNumber> px
                      </FormItem>
                      <FormItem label="进度条颜色">
                        <PnColorPicker size="small" v-model="row.progress.strokeColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="进度条背景色">
                        <PnColorPicker size="small" v-model="row.progress.trackColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="文字内显">
                        <i-switch size="small" v-model="row.progress.textInside">
                          <span slot="open"></span>
                          <span slot="close"></span>
                        </i-switch>
                      </FormItem>
                      <!--<FormItem label="显示状态">
                        <Select :transfer="true" size="small" v-model="row.progress.status" clearable>
                          <Option v-for="item in status" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                      </FormItem>-->
                      <FormItem label="圆形进度条宽度">
                        <InputNumber size="small" :max="1000" :min="1" v-model="row.progress.width"></InputNumber> px
                      </FormItem>
                      <FormItem label="显示文字提示">
                        <i-switch size="small" v-model="row.progress.showText">
                          <span slot="open"></span>
                          <span slot="close"></span>
                        </i-switch>
                      </FormItem>
                      <FormItem label="文字颜色">
                        <PnColorPicker size="small" v-model="row.progress.textColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="文字大小">
                        <InputNumber size="small" :max="1000" :min="1" v-model="row.progress.textFontSize"></InputNumber> px
                      </FormItem>
                    </FormItemPanel>

                    <FormItemPanel v-if="row.type == 'trend'" title="趋势图">
                      <FormItem label="基础值">
                        <InputNumber size="small" v-model="row.trend.baseValue"></InputNumber>
                      </FormItem>
                      <FormItem label="后缀">
                        <Input size="small" v-model="row.trend.suffixText" placeholder=""/>
                      </FormItem>
                      <FormItem label="同步文本颜色">
                        <i-switch size="small" v-model="row.trend.syncTextColor">
                          <span slot="open"></span>
                          <span slot="close"></span>
                        </i-switch>
                      </FormItem>
                      <FormItem label="显示图标">
                        <i-switch size="small" v-model="row.trend.showIcon"></i-switch>
                      </FormItem>
                      <FormItem label="图标大小">
                        <InputNumber size="small" v-model="row.trend.iconSize"></InputNumber> px
                      </FormItem>
                      <FormItem label="上升趋势颜色">
                        <PnColorPicker size="small" v-model="row.trend.topColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="持平趋势颜色">
                        <PnColorPicker size="small" v-model="row.trend.equalColor" alpha recommend/>
                      </FormItem>
                      <FormItem label="下降趋势颜色">
                        <PnColorPicker size="small" v-model="row.trend.downColor" alpha recommend/>
                      </FormItem>
                    </FormItemPanel>

                  </Form>
                </div>
              </Panel>
            </Collapse>
          </TabPane>
        </Tabs>

      </TabPane>
      <TabPane name="datasource_tab" tab="main_tabs" label="数据源">
        <DatasourceState v-if="mainTabsValue == 'datasource_tab'" targetComp="BaseTableComp" :showMappingSetting="false"></DatasourceState>
      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <InteractionReceive></InteractionReceive>
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <FormItemPanel title="行单击时运行脚本">
            <Alert show-icon :style="{paddingRight: '5px'}">通过【params】可获得点击的行数据</Alert>
            <CodeEditor v-model="rowClickHandleScript"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'
  import BaseTableComp from './BaseTableComp'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'BaseTableCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        progressTypes: [
          {
            label: '条形',
            value: 'line'
          },
          {
            label: '环形',
            value: 'circle'
          }
        ],
        status: [
          {
            label: 'success',
            value: 'success'
          },
          {
            label: 'exception',
            value: 'exception'
          },
          {
            label: 'warning',
            value: 'warning'
          },
          {
            label: 'info',
            value: 'info'
          },
        ],
        colTypes: [
          {
            label: '默认',
            value: 'default'
          },
          {
            label: '进度图',
            value: 'progress'
          },
          {
            label: '趋势图',
            value: 'trend'
          }
        ]
      }
    },
    mounted() {

    },
    methods: {

      addTableCol () {
        this.tableCols.push({
          field: 'newRow',
          title: '新列',
          width: 0,
          show: true,
          progress: BaseTableComp.buildProgressObj()
        })
      },

      deleteTableCol (index) {
        this.tableCols.splice(index, 1)
      }
    },
    computed: {
      ...mapFields({

        headerStyle: 'component.compConfigData.headerStyle',
        bodyStyle: 'component.compConfigData.bodyStyle',
        tableCols: 'component.compConfigData.tableCols',
        pager: 'component.compConfigData.pager',

        rowClickHandleScript: 'component.compConfigData.rowClickHandleScript',

      })
    }
  }
</script>

<style scoped>

</style>
